<template lang="pug">
  .page.fx-detail
    .enterprise-qrcode(v-if="enterprise_qrcode" @click="previewImg(enterprise_qrcode)")
      img(:src="enterprise_qrcode")
    .ivu-tabs-tabpane
      Row(type="flex" justify="start" :gutter="16") 
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 职位名称：
          .val {{detailInfo.position_name}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 招聘人数：
          .val {{detailInfo && detailInfo.position_recruit_num}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 公司名称：
          .val {{detailInfo.position_enterprise_name}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 所属行业：
          .val {{set_enterprise_industry_type}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w90 职位联系人：
          .val {{detailInfo && detailInfo.position_contacts?detailInfo.position_contacts:'未填写'}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w120 职位联系人电话：
          .val {{detailInfo && detailInfo.position_contacts_tel?detailInfo.position_contacts_tel:'未填写'}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 是否紧急：
          .val {{detailInfo && detailInfo.position_is_urgent === 4?'是':'否'}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 是否有奖：
          .val {{detailInfo && detailInfo.position_is_prize === 4?'是':'否'}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 结算方式：
          .val {{set_position_settlement_type}}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-text.w80 职位薪酬：
          .val {{detailInfo.position_pay}}
            span.ml-10 {{position_pay_company}}
        Col(span="24")
          span.label-text.w80 工作时间：
          .val {{detailInfo && detailInfo.position_work_time?detailInfo.position_work_time:'未填写'}}
        Col(span="24")
          span.label-text.w80 工作亮点：
          .val {{detailInfo && detailInfo.position_work_spot?detailInfo.position_work_spot:'未填写'}}
        Col(span="24")
          span.label-text.w80 工作地址：
          .val {{detailInfo && detailInfo.position_address?detailInfo.position_address:'未填写'}}
        Col(span="24")
          span.label-text.w80 职位描述：
          .val {{detailInfo && detailInfo.position_work_content?detailInfo.position_work_content:'未填写'}}
        Col(span="24")
          span.label-text.w80 备注信息：
          .val {{detailInfo && detailInfo.position_remarks?detailInfo.position_remarks:'未填写'}}
        Col(span="24")
          span.label-text.w80 分享标题：
          .val {{detailInfo && detailInfo.position_share_title?detailInfo.position_share_title:'未填写'}}
        Col(span="24")
          span.label-text.w80 分享图片：
          .val 
            .img-box(@click="previewImg(shareImgUrl)")
              img(:src="shareImgUrl")
      .go-back
        Button(type="info" @click="goBack") 返回列表
    Modal(v-model="previewModal")
      img(:src="previewImgUrl")
      .text-center(slot="footer")
        Button(type="primary" @click="previewModal = false") 关闭
</template>
<script>
import fxzpApi from '@/api/fx-zp.api.js'
export default {
  name: 'fx-oddjob-detail',
  data () {
    return {
      oddJobId: '',
      detailInfo: {},
      previewModal: false,
      previewImgUrl: ''
    }
  },
  created () {
    this.oddJobId = this.$route.query.oddJobId
    console.log(this.oddJobId)
  },
  mounted () {
    this.getDetail()
  },
  computed: {
    // 小程序二维码
    enterprise_qrcode () {
      if (this.detailInfo && this.detailInfo.position_qrcode) {
        return 'https://www.fx-zp.com' + this.detailInfo.position_qrcode
      } else {
        return ''
      }
    },
    // 小程序分享图片
    shareImgUrl () {
      if (this.detailInfo && this.detailInfo.position_share_img) {
        return 'https://www.fx-zp.com' + this.detailInfo.position_share_img
      } else {
        return '未上传'
      }
    },
    // 所属行业
    set_enterprise_industry_type () {
      if (this.detailInfo && this.detailInfo.position_industry_type) {
        let arr = this.getStatusFn('IndustryType')
        let text = arr.filter((item) => {
          return item.id === this.detailInfo.position_industry_type
        })
        if (text && text.length > 0) {
          return text[0].e_name
        } else {
          return '未填写'
        }
      } else {
        return '未填写'
      }
    },
    // 结算方式
    set_position_settlement_type() {
      if (this.detailInfo && this.detailInfo.position_settlement_type) {
        let arr = this.getStatusFn('SettlementType')
        // console.log(arr)
        let text = arr.filter((item) => {
          return item.id === this.detailInfo.position_settlement_type
        })
        if (text && text.length > 0) {
          return text[0].e_name
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    // 单位
    position_pay_company () {
      if (this.detailInfo && this.detailInfo.position_pay_company) {
        let arr = this.getStatusFn('ClearingUnit')
        let text = arr.filter((item) => {
          return item.id === this.detailInfo.position_pay_company
        })
        if (text && text.length > 0) {
          return text[0].e_name
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    // 职位类型
    get_position_type () {
      if (this.detailInfo && this.detailInfo.position_type) {
        let arr = this.getStatusFn('PositionType')
        // console.log(arr)
        let text = arr.filter((item) => {
          return item.id === this.detailInfo.position_type
        })
        if (text && text.length > 0) {
          return text[0].e_name
        } else {
          return '未填写'
        }
      } else {
        return '未填写'
      }
    },
    // 职位层级
    get_position_industry_typeid() {
      if (this.detailInfo && this.detailInfo.position_industry_typeid) {
        let text = this.position_industry_typeid.filter((item) => {
          return item.status === this.detailInfo.position_industry_typeid
        })
        if (text && text.length > 0) {
          return text[0].e_name
        } else {
          return '未填写'
        }
      } else {
        return '未填写'
      }
    },
    // 学历
    get_position_education () {
      if (this.detailInfo && this.detailInfo.position_education) {
        let arr = this.getStatusFn('EducationType')
        console.log(arr)
        let text = arr.filter((item) => {
          return item.id === this.detailInfo.position_education
        })
        if (text && text.length > 0) {
          return text[0].e_name
        } else {
          return '未填写'
        }
      } else {
        return '未填写'
      }
    }
  },
  methods: {
    getDetail () {
      fxzpApi.GetOddPosition({
        id: this.oddJobId
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.detailInfo = res.data.data
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    chooseTab (val) {
      console.log(val)
    },
    getStatusFn (encode) {
      let allStatus = JSON.parse(localStorage.getItem('FXZP_STATUS'))
      // console.log(allStatus)
      let statusArr = allStatus.filter((item) => {
        return item.e_encode === encode
      })
      return statusArr 
    },
    previewImg (url) {
      console.log(url)
      this.previewModal = true
      this.previewImgUrl = url
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less">
  .fx-detail{
    .ivu-tabs-bar{
      margin-bottom: 0;
    }
  }
</style>

<style lang="less" scoped>
  .fx-detail{
    position: relative;
    .ivu-tabs-tabpane {
      position: relative;
      min-height: 400px;
      background: #fff;
      padding: 30px 180px 60px 16px;
      border: 1px solid #dcdee2;
      border-radius: 6px;
      .go-back{
        position: absolute;
        bottom: 13px;
        left: 50%;
        margin-left: -44px;
      }
    }
    .ivu-col{
      display: flex;
      margin-bottom: 30px;
      span.label-txt{
        text-align: right;
        vertical-align: middle;
        float: left;
        color: #515a6e;
        line-height: 1;
        padding: 10px 12px 10px 0;
        box-sizing: border-box;
        white-space: nowrap;
      }
      .val{
        flex: 1;
        color: #333;
        .img-box{
          width: 78px;
          height: 78px;
          border: 1px solid #eee;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .enterprise-qrcode{
      width: 150px;
      position: absolute;
      z-index: 99;
      text-align: center;
      right: 60px;
      top: 19px;
      border-radius: 5px;
      box-shadow: 3px 5px 3px rgba(0, 0, 0, .05);
      background: #fff;
      border: solid 1px rgba(0, 0, 0, .02);
      cursor: pointer;
      &:before, &:after{
        content: "";
        width: 0px;
        height: 0px;
        border-width: 5px 5px 5px 5px;
        border-style: solid;
        position: absolute;
        top: 0;
      }
      &:before{
        border-color:   #f7fafc #eee #eee #f7fafc;
        left: -10px;
      }
      &:after{
        border-color:   #f7fafc #f7fafc #eee #eee;
        right: -10px;
      }
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>



